<template>
    <div>
        <el-card>
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="startDate" type="date" placeholder="开始日" />
                </el-col>
                <el-col :span="4">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="endDate" type="date" placeholder="截止日" />
                </el-col>
                <el-col :span="4">
                    <el-input v-model="noticeTypeName" style="width: 240px" placeholder="请输入公告名称" />
                </el-col>
                <el-col :span="3" style="margin-left: 20px;">
                    <el-button type="primary" @click="searchNoticeType"> <svg-icon name="magnifier" width="20px"
                            height="20px" style="padding-right: 5px;"></svg-icon></el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px;">
                <el-col :span="2">
                    <el-button type="danger" @click="deleteColumnByIds">批量删除</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="success" @click="addNoticeType">添加</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="noticeTypeList" stripe border row-key="id" style="margin-top: 30px;"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="100" :reserve-selection="true" />
                        <el-table-column prop="id" label="ID" width="100" />
                        <el-table-column prop="name" label="公告标题" width="150">
                        </el-table-column>
                        <el-table-column prop="type" label="公告类型" width="150"></el-table-column>
                        <el-table-column prop="noticeSort" label="排序" width="110" sortable>
                        </el-table-column>
                        <el-table-column prop="synopsis" label="简介" width="200"></el-table-column>
                        <el-table-column prop="createTime" label="加入时间" width="110"></el-table-column>
                        <el-table-column prop="status" label="状态" width="110">
                            <template #default="scope">
                                <el-switch :disabled="scope.row.ban" v-model="scope.row.status" active-color="#13ce66"
                                    inactive-color="#ff4949" @change="changeStatus(scope.row)" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="lookById(scope.row)">
                                    <svg-icon name="eye" width="30px" height="20px" style="padding-right: 5px;"></svg-icon>
                                </el-button>
                                <el-button type="primary" size="small" @click="ban(scope.row)">
                                    <svg-icon name="download" plain width="20px" height="15px"
                                        style="padding-right: 5px;"></svg-icon>
                                </el-button>
                                <el-button type="primary" size="small" @click="editColumnById(scope.row)">
                                    <svg-icon name="pen" width="20px" height="10px" style="padding-right: 5px;"></svg-icon>
                                </el-button>
                                <el-popconfirm width="220" :icon="InfoFilled" icon-color="#626AEF"
                                    :title="`确认删除 ${scope.row.name} 吗？`" @confirm="deleteColumnById(scope.row)">
                                    <template #reference>
                                        <el-button type="danger" size="small">
                                            <svg-icon name="delete" width="20px" height="15px"
                                                style="padding-right: 5px;"></svg-icon>
                                        </el-button>
                                    </template>
                                    <template #actions="{ confirm, cancel }">
                                        <el-button size="small">不!</el-button>
                                        <el-button type="danger" size="small" @click="confirm">
                                            确认？
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-dialog v-model="dialogFormVisible" :title="title" width="500" :before-close="cancel">
                <el-form :model="form" :rules="rules">
                    <el-form-item v-if="lookfilg" label="公告ID" label-width="100" label-position="top" prop="id">
                        <el-input v-model="form.id" placeholder="" :disabled="lookfilg"></el-input>
                    </el-form-item>
                    <el-form-item label="公告类型" label-width="100" label-position="top" prop="type">
                        <el-select v-model="form.type" placeholder="请选择公告类型" :disabled="lookfilg">
                            <el-option lable="通知" value="通知"></el-option>
                            <el-option lable="简讯" value="简讯"></el-option>
                            <el-option lable="提示" value="提示"></el-option>
                            <el-option lable="通告" value="通告"></el-option>
                            <el-option lable="启示" value="启示"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公告标题" label-width="100" label-position="top" prop="name">
                        <el-input v-model="form.name" autocomplete="off" placeholder="5个左右,8汉字以内,用英文,隔开"
                            :disabled="lookfilg" />
                    </el-form-item>
                    <el-form-item label="排序" label-width="100" label-position="top" prop="noticeSort">
                        <el-input v-model="form.noticeSort" placeholder="请输入数字" :disabled="lookfilg"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" label-width="100" label-position="top" prop="status">
                        <el-radio-group v-model="form.status" :disabled="lookfilg">
                            <el-radio :value=true size="large">启用</el-radio>
                            <el-radio :value=false size="large">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="描述" label-width="100" label-position="top" prop="synopsis">
                        <el-input v-model="form.synopsis" :rows="2" type="textarea" placeholder="请输入内容"
                            :disabled="lookfilg" />
                    </el-form-item>
                    <el-form-item v-if="lookfilg" label="加入时间" label-width="100" label-position="top" prop="content">
                        <el-input v-model="form.createTime" placeholder="请输入内容" :disabled="lookfilg"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary" @click="saveOrUpdata" v-if="!lookfilg">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-row>
                <el-col :span="24">
                    <el-pagination @current-change="searchNoticeType" @size-change="searchNoticeType" size="small"
                        v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[3, 5, 10, 20]" :total="total"
                        :background="true" layout="prev, pager, next, jumper,->,sizes, total"
                        style="margin-top: 20px;text-align: center;">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import useNoticeTypeStore from '@/store/modules/noticeType'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
let startDate = ref('')
let endDate = ref('')

let title = ref("")
let pageNo = ref(1)
let limit = ref(3)
let total = ref(0)
let deleteTitle = ref('')

let noticeTypeList = ref([])
let noticeTypeStore = useNoticeTypeStore()
let noticeTypeName = ref('')
let form = ref({
    id: '',
    name: '',
    type: '',
    noticeSort: '',
    synopsis: '',
    status: '',
    createTime: '',
    ban: false
})

let dialogFormVisible = ref(false) //控制新增弹窗的显示与隐藏

const select_order_number = ref('') //表格select选中的条数
const select_orderId = ref([]) //表格select复选框选中的id
const multipleSelection = ref([])

let lookfilg = ref(false) //控制查看弹窗的显示与隐藏


//当表格选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
    // 解决来回切换页面，也无法清除上次选中情况
    multipleSelection.value = val;
    select_order_number.value = multipleSelection.value.length;
    select_orderId.value = [];
    if (val) {
        undefined;
        val.forEach((row) => {
            undefined;
            if (row) {
                undefined;
                select_orderId.value.push(row.id);
            }
        });
    }
    console.log(select_orderId.value);
}

const getNoticeType = () => {
    noticeTypeStore.getNoticeType(pageNo.value, limit.value).then(res => {
        noticeTypeList.value = noticeTypeStore.noticeTypeList
    })
    noticeTypeStore.getNoticeTypeTotal().then(res => {
        total.value = noticeTypeStore.total
    })
}

const searchNoticeType = () => {

    var data = {
        noticeTypeName: noticeTypeName.value,
        startDate: startDate.value,
        endDate: endDate.value,
        pageStart: (pageNo.value - 1) * limit.value,
        pageEnd: limit.value
    }
    noticeTypeStore.searchNoticeType(data).then(res => {
        noticeTypeList.value = noticeTypeStore.noticeTypeList
        total.value = noticeTypeStore.total
    })
}

const ban = (row) => {
    //获取这一行中的开关组件
    row.ban = !row.ban
}


const addNoticeType = () => {
    dialogFormVisible.value = true
    form.value = {
        id: null,
        name: '',
        type: '',
        noticeSort: 1,
        synopsis: '',
        status: '',
        ban: false
    }
}

const cancel = () => {
    dialogFormVisible.value = false
}

const saveOrUpdata = () => {
    if (form.value.id) {
        //判断表单元素是否为空
        if (form.value.name === '') {
            ElMessage.error("添加失败，请输入公告名称")
            return
        }
        if (form.value.type === '') {
            ElMessage.error("添加失败，请输入公告类型")
            return
        }
        if (form.value.noticeSort === '') {
            ElMessage.error("添加失败，请输入公告排序")
            return
        }
        if (form.value.synopsis === '') {
            ElMessage.error("添加失败，请输入公告内容")
            return
        }


        noticeTypeStore.updateNoticeType(form.value).then(res => {
            dialogFormVisible.value = false
            getNoticeType()
            ElMessage.success("修改成功")
        })
    } else {
        noticeTypeStore.addNoticeType(form.value).then(res => {
            dialogFormVisible.value = false
            getNoticeType()
        })
    }
}

const editColumnById = (row) => {
    form.value = row
    dialogFormVisible.value = true
    lookfilg.value = false
}

const deleteColumnById = (row) => {
    noticeTypeStore.deleteNoticeType(row.id).then(res => {
        getNoticeType()
    })
}

const deleteColumnByIds = () => {
    noticeTypeStore.deleteNoticeTypes(select_orderId.value).then(res => {
        getNoticeType()
    })
}

const changeStatus = (row) => {
    noticeTypeStore.changeStatus(row.id, row.status).then(res => {
        getNoticeType()
    })
}


const rules = reactive({
    type: {
        required: true, message: '请输入公告类型', trigger: 'blur'
    },
    name: {
        required: true, message: '请输入公告名称', trigger: 'blur'
    },
    noticeSort: {
        required: true, message: '请输入公告排序', trigger: 'blur'
    },
    status: {
        required: true, message: '请输入公告状态', trigger: 'blur'
    },
    synopsis: {
        required: true, message: '请输入公告内容', trigger: 'blur'
    }

})

const lookById = (row) => {
    lookfilg.value = true
    form.value = row
    dialogFormVisible.value = true
}

onMounted(() => {
    getNoticeType()
})

</script>

<style scoped lang="scss"></style>
